[data-theme="demoa"],
:root {
    --color-background: #ffffff;
    --color-background-secondary: #f3f4f6;
    --color-background-tertiary: #e5e7eb;
    --color-background-elevated: #ffffff;
    --color-background-overlay: rgba(0, 0, 0, 0.5);

    --color-text: #111827;
    --color-text-secondary: #4b5563;
    --color-text-tertiary: #6b7280;
    --color-text-inverse: #ffffff;

    --color-border: #d1d5db;
    --color-border-secondary: #e5e7eb;

    --color-primary: #42b883;
    --color-primary-hover: #34a773;
    --color-primary-active: #2a8c61;
    --color-primary-disabled: #a8d8c1;

    --color-success: #22c55e;
    --color-warning: #f59e0b;
    --color-error: #ef4444;

    --color-focus-ring: rgba(66, 184, 131, 0.5);
    --color-scrollbar-thumb: #d1d5db;
    --color-scrollbar-thumb-hover: #9ca3af;

    --shadow-default: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

[data-theme="demob"],
:root {
    --color-background: #0fffff;
    --color-background-secondary: #03f4f6;
    --color-background-tertiary: #e0e7eb;
    --color-background-elevated: #f0ffff;
    --color-background-overlay: rgba(0, 0, 0, 1);

    --color-text: #111807;
    --color-text-secondary: #4b0563;
    --color-text-tertiary: #6b7080;
    --color-text-inverse: #fff0ff;

    --color-border: #d1d50b;
    --color-border-secondary: #e0e7eb;

    --color-primary: #42b083;
    --color-primary-hover: #340773;
    --color-primary-active: #2a0c61;
    --color-primary-disabled: #08d8c1;

    --color-success: #22c05e;
    --color-warning: #f50e0b;
    --color-error: #ef4044;

    --color-focus-ring: rgba(66, 104, 131, 0.5);
    --color-scrollbar-thumb: #d1d0db;
    --color-scrollbar-thumb-hover: #90a3af;

    --shadow-default: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}